<form class="layui-form seller-form" action="">

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">年度：</label>
            <div class="layui-input-inline" id="year_box">
                <select name="year" lay-filter="year" id="year" list="year_list" lay-search>
                    <option value=""></option>
                    <datalist  id="year_list" lay-search>
                        {volist name="yearList" id="yearList"}
                        <option value="{$yearList.id}">{$yearList.year}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">季度：</label>
            <div class="layui-input-inline" id="season_box">
                <select name="season" lay-filter="season" id="season" list="season_list" lay-search>
                    <option value=""></option>
                    <datalist  id="season_list" lay-search>
                        {volist name="seasonList" id="seasonList"}
                        <option value="{$seasonList.season_id}">{$seasonList.season_name}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">部/院：</label>
            <div class="layui-input-inline">
                <select name="dep_id" lay-filter="dep_id" id="dep_id" list="dep_list" lay-search>
                    <option value=""></option>
                    <datalist  id="dep_list" lay-search>
                        {volist name="deptList" id="deptList"}
                        <option value="{$deptList.bmdm}">{$deptList.bmmc}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>	
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">专业：</label>
            <div class="layui-input-inline" id="specialty_box">
                <select name="specialty_id" lay-filter="specialty_id" id="specialty_id" list="specialty_list" lay-search>
                    <option value=""></option>
                    <datalist  id="specialty_list" lay-search>
                        {volist name="specialtyList" id="specialtyList"}
                        <option value="{$specialtyList.zydm}">{$specialtyList.zymc}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">班级：</label>
            <div class="layui-input-inline" id="class_box">
                <select name="class_id" lay-filter="class_id" id="class_id" list="class_list" lay-search>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">方向：</label>
            <div class="layui-input-inline" id="dir_box">
                <select name="dir" lay-filter="dir" id="dir" list="dir_list" lay-search>
                    <option value=""></option>
                    <datalist  id="dir_list" lay-search>
                        {volist name="dirList" id="dirList"}
                        <option value="{$dirList.id}">{$dirList.name}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="search"><i 
                    class="iconfont icon-chaxun"></i>查询</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="syncClassList" id="syncClassList"><i 
                    class="iconfont icon-chaxun"></i>一键关联</button>   
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="studentUnrelList" id="studentUnrelList"><i 
                    class="iconfont icon-chaxun"></i>未关联财务班级</button>        
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="planUnrelList" id="planUnrelList"><i 
                    class="iconfont icon-chaxun"></i>未关联计划</button>  
        </div>
    </div>

</form>

<div class="table-body">
    <table id="planStudentRelTable" lay-filter="planStudentRelTable"></table>
</div>

<script type="text/html" id="statusTpl">
    {{#  if(d.status === '已关联'){ }}
        <span style="color: #20a53a;">{{ d.status }}</span>
    {{#  } else { }}
        <span style="color: #FF0000;">{{ d.status }}</span>
    {{#  } }}
</script>

<script>
    layui.use(['table', 'form', 'layer', 'laydate'], function () {
        var layer = layui.layer, table = layui.table, form = layui.form, date = layui.laydate;
        //执行渲染
        var mainTable = table.render({
            id: 'planStudentRelTable',
            elem: '#planStudentRelTable', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-165',
            cellMinWidth: '80',
            page: 'true',
            limit: '20',
            url: "{:url('BookCommon/returnNull')}",
            cols: [[ //标题栏
                { type: 'numbers' },
                { field: 'id', title: 'ID', hide:true},
                { field: 'plan_year', sort: true, title: '年度', width: 80, align: 'center' },
                { field: 'plan_season', sort: true, title: '季度', width: 80, align: 'center' },
                { field: 'dept_name', sort: true, title: '部/院', width: 120, align: 'center' },
                { field: 'specialty_name', sort: true, title: '专业', width: 200, align: 'center' },
                { field: 'plan_class_name', sort: true, title: '班级', width: 240, align: 'center' },
                { field: 'plan_dirName', sort: true, title: '方向', width: 80, align: 'center' },
                { field: 'plan_grade', sort: true, title: '年级', width: 80, align: 'center' },
                { field: 'plan_degree_name', sort: true, title: '层次', width: 160, align: 'center' },
                { field: 'status', sort: true, title: '状态', width: 80, align: 'center', templet: '#statusTpl'},
                { field: 'operating', title: '操作', width:100, align: 'center', templet:function(data){
                    var html = '';
                    html += '<a class="layui-btn layui-btn-xs" name="editRel" lay-event="editRel">编辑关联</a>';
                    return html;
                }}
            ]], //设置表头
            // where: {"year":$("#year").val(), "season": $("#season").val(), "dir": $("#dir").val(), "is_ff": $("#is_ff").val()} 
            //,…… //更多参数参考右侧目录：基本参数选项
        });
 
        layui.use('form', function () {
            // 联动年度
            form.on('select(year)', function (data) {
                getClass(data);
            });

            // 联动专业  
            form.on('select(specialty_id)', function (data) {
                getClass(data);
            });

            // 联动部门
            form.on('select(dep_id)', function (data) {
                getSpecialty(data);
            });
        });

        // 得到专业
        function getSpecialty(data) {
            $.ajax({
                type: 'get',
                url: "{:url('BookCommon/getSpecicalties')}",
                data: 'bmdm=' + data.value,
                success: function(e) {
                    if(e.status) {
                        $("#specialty_id").empty();//清空下拉框的值
                        $('#specialty_id').append(new Option('', ''));// 下拉菜单里添加元素
                        $("#class_id").empty();//清空下拉框的值
                        $('#class_id').append(new Option('', ''));// 下拉菜单里添加元素
                        $.each(e.data.data, function (index, item) {
                            $('#specialty_id').append(new Option(item.zymc, item.zydm));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    } else {
                        layer.msg(e.msg);
                    }
                }
            });
        };
        
        // 得到班级
        function getClass(data) { 
            var dept = $("#dep_id").val();
            var specialty_id = $("#specialty_id").val();
            var year = $("#year").val();
            var season= $("#season").val();

            $.ajax({
                type: 'get',
                url: "{:url('BookCommon/getClasses')}",
                data: {
                        "bmdm": dept,
                        "zydm": specialty_id,
                        "plan_year":  year,
                        "plan_season": season
                    },
                success: function(e) {
                    if(e.status) {
                        $("#class_id").empty();//清空下拉框的值
                        $('#class_id').append(new Option('', ''));// 下拉菜单里添加元素
                        $.each(e.data.data, function (index, item) {
                            $('#class_id').append(new Option(item.plan_class_name, item.plan_class_id));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    } else {
                        layer.msg(e.msg);
                    }
                }
            });
        };

        // 查询
        form.on('submit(search)', function (data) {
            table.reload('planStudentRelTable', {
                where: data.field,
                page: {curr: 1},
                url: "{:url('PlanStudentRel/index')}",
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        // 未关联财务班级
        form.on('submit(studentUnrelList)', function (data) {
            $("#studentUnrelList").addClass("layui-btn-disabled");
            $('#studentUnrelList').attr("disabled", true);
            JsGet("{:url('PlanStudentRel/studentUnrelList')}", function(e){
                $("#studentUnrelList").removeClass("layui-btn-disabled");
                $('#studentUnrelList').removeAttr("disabled");
                if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                    layer.msg(e.msg); return false;
                }

                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['850px', '480px'],
                    title: '未关联班级'
                })
            });
            return false;
        });
        
        // 未关联财务班级
        form.on('submit(syncClassList)', function (data) {
            $("#syncClassList").addClass("layui-btn-disabled");
            $('#syncClassList').attr("disabled", true);
            JsGet("{:url('PlanStudentRel/syncClassList')}", function(e){
                $("#syncClassList").removeClass("layui-btn-disabled");
                $('#syncClassList').removeAttr("disabled");
                if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                    layer.msg(e.msg); return false;
                }
                
                layer.msg(e.msg);
            });
            return false;
        });
        
        // 未关联计划
        form.on('submit(planUnrelList)', function (data) {
            $("#planUnrelList").addClass("layui-btn-disabled");
            $('#planUnrelList').attr("disabled", true);
            JsGet("{:url('PlanStudentRel/planUnrelList')}", function(e){
                $("#planUnrelList").removeClass("layui-btn-disabled");
                $('#planUnrelList').removeAttr("disabled");
                if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                    layer.msg(e.msg); return false;
                }

                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['850px', '440px'],
                    title: '未关联计划'
                })
            });
            return false;
        });
  
        //监听工具条
        table.on('tool(planStudentRelTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'editRel'){ //编辑
                $("input[name='editRel']").addClass("layui-btn-disabled");
                $("input[name='editRel']").attr("disabled", true);
                JsGet("{:url('PlanStudentRel/editRel')}?bmdm=" + data.dept_id + "&bmmc=" + data.dept_name + "&zydm=" + data.specialty_id + "&zymc=" + data.specialty_name + "&dir=" + data.plan_dir + "&dirName=" + data.plan_dirName + "&planCode=" + data.plan_code + "&rxnd=" + data.plan_grade + "&xsxzdm=" + data.plan_degree_id, function(e){             
                    $("input[name='editRel']").removeClass("layui-btn-disabled");
                    $("input[name='editRel']").removeAttr("disabled");
                    if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                        layer.msg(e.msg); return false;
                    }
                    
                    window.box = layer.open({
                        type: 1,
                        content: e,
                        area: ['850px', '450px'],
                        title: '关联关系(' + data.plan_class_name + '-' + data.plan_dirName + ')',
                        end:function () {
                            table.reload('planStudentRelTable');
                        }
                    })
                });
            }
            return false;
        }); 
    })
  
    $("#year").val({$year});  // 年度：
    $("#season").val({$season});  // 季度：春季
    $("#dir").val(1);  // 默认方向：就业
</script>